Fix mode switch icon sizing issue #8316
Closed
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
- Changed PocketKnife icon from className="w-4" to className="size-4" - This ensures both width and height are set to prevent icon shrinking - Aligns with TerminalSquare icon implementation for consistency
dosubot
bot
added
size:XS
hannesrudolph
added
the
Issue/PR - Triage
![roomote[bot]](https://avatars.githubusercontent.com/in/1546624?s=60&v=4){kind=small}
| <> | ||
| <div style={headerStyle}> | ||
| <PocketKnife className="w-4" aria-label="Switch mode icon" /> | ||
| <PocketKnife className="size-4" aria-label="Switch mode icon" /> |
Contributor
Author
There was a problem hiding this comment.
P2: To fully prevent flex layouts from shrinking the icon, consider adding Tailwind shrink-0 alongside size-4. This keeps the icon at 16px even under flexbox pressure.
| <> | ||
| <div style={headerStyle}> | ||
| <PocketKnife className="w-4" aria-label="Switch mode icon" /> | ||
| <PocketKnife className="size-4" aria-label="Switch mode icon" /> |
Contributor
Author
There was a problem hiding this comment.
P3 (a11y): If the icon is decorative (adjacent text conveys the meaning), prefer aria-hidden="true" without an aria-label. If it is meaningful on its own, ensure the label is specific and not redundant.
hannesrudolph
added
PR - Needs Review
and removed
Issue/PR - Triage
Collaborator
|
Closing in favor of #8343 |
github-project-automation
bot
moved this from PR [Needs Review]
to Done
in Roo Code Roadmap
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary
Fixes the issue where the mode switch icon (PocketKnife) sometimes appears tiny or shrinks down.
Problem
The PocketKnife icon for mode switches was using
className="w-4"which only sets the width. When the icon's container used flex layouts or didn't preserve aspect ratio, the icon would shrink vertically, appearing tiny.Solution
Changed from
className="w-4"toclassName="size-4"to explicitly set both width and height to 1rem (16px), preventing the icon from shrinking.Changes
w-4tosize-4size-4Testing
Context
This fix was requested via Slack: "Why is the icon sometimes tiny for mode switches? Can you fix it so it doesn't shrink down?"
The
size-4utility in Tailwind CSS sets both width and height, ensuring the icon maintains its proper dimensions regardless of container layout.Important
Fixes mode switch icon sizing issue in
ChatRow.tsxby changingclassNamefromw-4tosize-4.ChatRow.tsxby changingclassNamefromw-4tosize-4.This description was created by
for 46dd63b. You can customize this summary. It will automatically update as commits are pushed.